<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ info.name }}--{{ info.age }}</h2>
    <h3>{{ str }}</h3>
    <button @click="change">修改信息</button>
    <button @click="changeStr">改变str</button>
    <button @click="console1">打印ref对象的值</button>
    <h1>{{ refobj.hoppy }}</h1>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props) {
    // 在使用ref包裹对象或者值时  在script中需要通过.value来进行操作
    // 而在template中  vue会对ref包裹的属性或者值进行解构 所以不需要写.value
    let str = ref("测试的ref的api");
    const refobj = ref({
      hoppy: "学习",
      name: "jack",
    });
    const console1 = () => {
      console.log(refobj.value.hoppy);
      console.log(str);
    };
    const changeStr = () => {
      str.value += 1;
    };
    const info = reactive({
      name: "xfy",
      age: 18,
    });
    const change = () => {
      info.age++;
    };

    return {
      refobj,
      info,
      change,
      str,
      changeStr,
      console1,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
